<div class="header" [class.show-search]="showSearchText" *ngIf="layout === 'top-action'">
  <div class="clearfix action-bar " [class.show-form]="!showForm" #actionBar>
    <div class="primary-action pull-left">
      <!-- <ng-content select="bz-query-primary-action"></ng-content> -->
      <ng-container *ngTemplateOutlet="bzQueryActionBar"></ng-container>
    </div>
    <div class="secondary-action pull-right">
      <ng-content select="bz-query-secondary-action"></ng-content>
    </div>
  </div>

  <div class="query-input" [class.show-form]="!showForm" #queryInput *ngIf="showSearchText">
    <i nz-icon nzType="search" class="search-icon" style="font-size: 1.2em;vertical-align: middle;"></i>
    <input type="text" [(ngModel)]="searchText" (ngModelChange)="searchTextChange.emit($event)" (keyup.enter)="search.emit(searchText)">
    <i nz-icon nzType="close-circle" theme="fill" class="search-text-close" (click)="searchText = null;searchTextChange.emit(null)"
       *ngIf="searchText"></i>
  </div>

  <div class="form-toggle" (click)="showForm = !showForm" #formToggle>
    <i class="unex unex-icon-filter" style="font-size: 2em;"></i>
    {{'@filter' | bzI18n:'core'}}&nbsp;
    <i class="unex  " [class.unex-icon-up]="showForm" [class.unex-icon-down]="!showForm"></i>
  </div>
</div>

<div class="query-form" [style.display]="!showForm ? 'none' : 'block'" #queryForm>
  <ng-content select="bz-form"></ng-content>
</div>

<div class="query-action-bar" [class.hidden-form]="!showForm" *ngIf="layout === 'bottom-action'">
  <ng-container *ngTemplateOutlet="bzQueryActionBar"></ng-container>

  <button class="btn-text" nz-button nzType="default" style="visibility: hidden;vertical-align: top;">&nbsp;</button>
  <button class="toggle-btn btn-text" nz-button nzType="default"
          (click)="showForm = !showForm">
    <span *ngIf="!showForm">
      {{'@expand-filter' | bzI18n:'core'}}
      <i class="unex unex-icon-down" style="font-size: 0.8em;vertical-align: top;"></i>
    </span>
    <span *ngIf="showForm">
      {{'@collapse-filter' | bzI18n:'core'}}
      <i class="unex unex-icon-up" style="font-size: 0.8em;vertical-align: top;"></i>
    </span>

  </button>
</div>

<ng-template #bzQueryActionBar>
  <ng-content select="bz-query-action-bar"></ng-content>
</ng-template>
